<template>
	<div class="swiper siz-swiper">
      <ol class="siz swiper-wrapper">
        <li v-for="item in list" :key="item.id" class="swiper-slide" >
			<router-link to="/">
				<img :src="item.imgURL" />
				<p>{{item.name}}</p>
			</router-link>
		</li>
      </ol>
    </div>
</template>

<script>
//1.引入vue周期函数
import { onMounted } from 'vue';
//2.引入Swiper的动态组件
import Swiper , {
	Autoplay,
	EffectCoverflow,
	EffectCube,
	Pagination,
} from 'swiper';
//3.swiper组件应用配置
Swiper.use([ Autoplay , EffectCoverflow , EffectCube , Pagination ]);

//
export default{
	name:'Siz',
	data(){
		return{
			list:[
				{ id:1,imgURL:'imgcon/1.png',name:'景点导航' },
				{ id:2,imgURL:'imgcon/6.png',name:'购物' },
				{ id:3,imgURL:'imgcon/11.png',name:'景点打卡' },
				{ id:4,imgURL:'imgcon/4.png',name:'美食' },
				{ id:5,imgURL:'imgcon/5.png',name:'猫眼影院' },
				{ id:6,imgURL:'imgcon/2.png',name:'攻略' },
				{ id:7,imgURL:'imgcon/3.png',name:'风情民俗' },
				{ id:8,imgURL:'imgcon/7.png',name:'出行服务' },
				{ id:9,imgURL:'imgcon/13.png',name:'收藏' },
				{ id:10,imgURL:'imgcon/17.png',name:'旅游贷' },
				{ id:11,imgURL:'imgcon/10.png',name:'租车服务' },
				{ id:12,imgURL:'imgcon/20.png',name:'驴友' },
			]
		}
	},
	setup(){
		onMounted( ()=>{ 
			new Swiper( '.siz-swiper' , {
				slidesPerView : 4
			} )
		} )
	}
}
</script>

<style scoped>
a{
	text-decoration: none;
	color: black;
}
.siz{
	padding: 0.3rem 0;
}
.siz li{
	float: left;
	width: 20%;
	text-align: center;
}
.siz li img{
	width: 0.8rem;
	height: 0.8rem;
}
</style>
